<template>
	<view class="content">
		<view class="lists" >
			<!-- 标题部分 -->
			<view class="head">
				<view class="head_text">
					商城-基础版
				</view>
				<view class="head_text1">
					主要针对个人(独立设计师)或3人以下的运用团队开店，满足服务项主要针对个人(独立设计师)或3人以下的运用团队开店，满足服务项.
				</view>
				<view class="price">￥588.00元 /年</view>
			</view>
			<!-- 下变按钮和价格 -->
			<view class="footer">
				<view class="ServiceCycle">服务周期</view>
				<view class="nowOrder" ><text>一年</text></view>
				<view class="default" ><text>两年</text></view>
			</view>
			
		</view>
		<!-- 信息列表 -->
		<view class="infor_list" v-for="(item,index) in infor_list" :key='index'>
			<view class="head">
				<view class="head_text">
					{{item.name}}
				</view>
				<view class="head_text1">
					{{item.text}}
				</view>
				<view class="price">￥{{item.price}}元 /年</view>
			</view>
			<view class="btn">
				<u-checkbox v-model="item.status" shape="circle" @change='checkboxChange(e,item)' active-color="#1EBBBD" iconSize='20rpx' ></u-checkbox>
			</view>
		</view>
		<!-- 底部价格，提交 -->
		<view class="bottom">
			<view class="price">
				<text>合计:</text><text class="text_price">￥{{totalPrice}}</text>
			</view>
			<view class="btn" @click="subimt">
				<text>提交订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				infor_list:[
					{name:'店铺保证金',text:'主要针对个人(独立设计师)或3人以下的运用团队开店，满足服务项主要针对个人(独立设计师)或3人以下的运用团队开店，满足服务项.',price:1000.00,status:true},
					{name:'渠道代理商',text:'成为平台合伙人，赚取平台会员、商户、商品收益；低成本创业、获取更多商业机会.',price:16800.00,status:true},
				],//信息列表
				totalPrice:0//总价
			}
		},
		methods:{
			checkboxChange(e,item) {
						console.log(item.status);
						this.totalPrice = 0
						this.totalPrices()
					},
			//计算总价
			totalPrices(){
				let that = this
				this.infor_list.map(items=>{
					if(items.status==true){
						that.totalPrice+=items.price
					}
					
				})
			},
			//提交
			subimt(){
				uni.navigateTo({
					url:'../store_pay/store_pay'
				})
			}
		},
		created() {
			let that = this
			this.$nextTick(function(){
				that.totalPrices()
			})
		
		}
	}
</script>
<style>
	page{
		background: #EFEFEF;
		
	}
</style>
<style scoped lang="less">
	.content{
		padding-top: 20rpx;
		.lists{
			// width: 100%;
			padding: 37rpx 25rpx;			
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 7rpx 0px rgba(113, 113, 113, 0.26);
			border-radius: 4rpx;
			margin-bottom: 23rpx;
			.head{
				border-bottom: 1rpx solid #E1E1E1;
				.head_text{					
					font-size: 34rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #282828;
					}
				.head_text1{					
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #414141;
					line-height: 40rpx;
				}
				.price{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #00C6C2;
					line-height: 30rpx;
					margin-bottom: 10rpx;
				}
			}
			// 价格和按钮
			.footer{
				display: flex;
				flex-direction: row;
				// justify-content: space-around;
				align-items: center;
				padding-top: 15rpx;
				.ServiceCycle{					
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #414141;
					line-height: 30rpx;
					flex: 2;
				}
				.nowOrder{
					width: 154rpx;
					height: 58rpx;
					background: #00C6C2;
					border-radius: 4rpx;
					text-align: center;
					line-height: 58rpx;
					margin-left: 20rpx;
					text{
						color: white;
						opacity: 0.8;
					}
				}
				.default{
					width: 154rpx;
					height: 58rpx;
					border-radius: 4rpx;
					text-align: center;
					line-height: 58rpx;
					margin-left: 20rpx;
					border: 1px solid #D1D1D1;
					text{
					
						opacity: 0.8;
					}
				}
			}
		}
		//信息列表
		.infor_list{
			padding: 37rpx 25rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 7rpx 0px rgba(113, 113, 113, 0.26);
			border-radius: 4rpx;
			margin-bottom: 23rpx;
			display: flex;
			align-items: center;
			.head{
				flex: 4;
				.head_text{					
					font-size: 34rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #282828;
					}
				.head_text1{					
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #414141;
					line-height: 40rpx;
				}
				.price{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #00C6C2;
					line-height: 30rpx;
					margin-bottom: 10rpx;
					margin-top: 10rpx;
				}
			} 
			.btn{
				flex: 1;
				text-align: center;
				/deep/.u-icon{
					transform: translateY(-6rpx);
				}
			}
		}
		//底部提交
		.bottom{
			position: fixed;
			bottom: 0;
			display: flex;
			height: 165rpx;
			width: 100%;
			background-color: white;
			justify-content: space-around;
			align-items: center;
			.price{
				
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
				.text_price{
					
					font-weight: bold;
				}
			}
			.btn{
				width: 232rpx;
				height: 94rpx;				
				background: #00C6C2;
				border: 1rpx solid #00C6C2;
				border-radius: 0rpx 4rpx 4rpx 0rpx;
				text-align: center;
				line-height: 94rpx;
				text{
					opacity: 0.8;
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
